<script setup defer async lang="ts">
	import { ref, reactive, onMounted, nextTick } from 'vue'
	import { banner, taskList, taskStage, homeAnnouncement, platformConfig,configList, getHomeAnnouncement, getInstallBookmarkInfo, settleInstallBookmarkInfo, taskBaseList,getWithdrawalChannel } from '@/api/user'
	import { useI18n } from 'vue-i18n';
	import { getUuid, checkFirstVisit,convertNumbers } from '@/utils/utils'
	import { useRouter } from "vue-router";
	import {API_IMG_URL} from '@/utils/apiUrl'
	import { useUserInfo } from '@/store/user'
	const userInfoStore = useUserInfo()
	const route = useRouter();
	const router = useRouter();
	
	const { t, locale } = useI18n();
	const symbol = ref('$')
	const countryIsClick = ref(false); 
	const imgUrl = ref(API_IMG_URL())
	const installCertificateShow = ref(false); 
	const lagdataIsClick = ref(false); 
	const showTips = ref(false); 
	const hasVisited = ref(uni.getStorageSync('hasVisited'));
	const rulesPopusShow = ref(false);
	
	const isChecked = ref(false);
	const iframeTopValue = ref('0px');
	const iframeHeghtValue = ref('0px');
	const allocationList=ref([])
	const exchangeRate=ref(1);
		const rateArray=ref([])
	const switchLanguage = (lang : any) => {
		locale.value = lang; 
		uni.setStorageSync('langs', lang)
		
		uni.setNavigationBarTitle({
			title: t('home') 
		});
	};
	const countryData = reactive({
			showselect: false,
			index: 1,
		})
	const lagdata = reactive({
		showselect: false,
		index: 5,
	})
	const openChooseLanguage = () => {
		lagdata.showselect = true;
		lagdataIsClick.value = true;
	}
	const setLanguageOpen = () => {
		lagdata.showselect = true;
	}
	const setLanguageClose = () => {
		lagdata.showselect = false;
	}
	const pluss = (arr : Array<any>) => {
		let count = 0
		arr.map((item : any) => {
			count = count + item.rewardUpper
		})
		count=convertNumbers(count,exchangeRate.value);
		return count
	}
		const openChooseCountry = (event) => {
			countryData.showselect = true;
			countryIsClick.value = true;
		}
	const plussTask = (arr : Array<any>) => {
		let count = 0
		arr.map((item : any) => {
			count = count + item.rewardLower
		})
		count=convertNumbers(count,exchangeRate.value);
		return count
	}
		const setCountryOpen = () => {
			countryData.showselect = true;
		}
		const setCountryClose = () => {
			countryData.showselect = false;
		}
const noticeList = (list: any[], type: number): string[] => {
  return list.map((item: any) => {
    const rewardRange = `${convertNumbers(item.rewardLower / 100, exchangeRate.value)} - ${convertNumbers(item.rewardUpper / 100, exchangeRate.value)}${symbol.value}`;

    switch (type) {
      case 5:
        return `${t('Invite')}${item.valueCount} ${t('People')} ${rewardRange}`;
      case 2:
        return `${t('Standing')}${item.valueTime / 60} M ${rewardRange}`;
      default:
        return `${t('ScanCode')}${item.valueCount} ${t('Account')} ${rewardRange}`;
    }
  });
};
	const showTipsClose = () => {
		showTips.value = false;
	}
	const showTipsOpen = () => {
		showTips.value = true;
	}
	const goRegister = () => {
		uni.setStorageSync('hasVisited', 'true');
		let queryUrl;
		if (uni.getStorageSync('code')) {
			queryUrl = `?code=${uni.getStorageSync('code')}`
		}
		if (uni.getStorageSync('code')) {
			queryUrl = `?code=${uni.getStorageSync('promo_code')}`
		}
		
		
		
		
		if (uni.getStorageSync('code') || uni.getStorageSync('promo_code')) {
			window.top?.postMessage(`/pages/login/register`, window.location.origin)
			uni.navigateTo({
				url: '/pages/login/register'
			})
		} else {
			window.top?.postMessage(`/pages/login/index`, window.location.origin)
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}

	}
	const country=ref(1);
	const selectCountry = () => {
		if (countryData.index === 1) {
			symbol.value = '₹'
			country.value=1;
		}
		if (countryData.index === 2) { 
			symbol.value = 'Rp'
			country.value=2;
		}
		if (countryData.index === 3) { 
			symbol.value = '₦'
			country.value=3;
		}
		if (countryData.index === 4) { 
			symbol.value = '৳'
			country.value=4;
		}
		if (countryData.index === 5) { 
			symbol.value = 'Rs'
			country.value=5;
		}
		
		const foundRate = rateArray.value.find(item => item.country === country.value);
		exchangeRate.value = foundRate ? foundRate.content : 1;
		uni.setStorageSync('symbol', symbol.value);
		uni.setStorageSync('country', country.value);
		uni.setStorageSync('exchangeRate',exchangeRate.value);
		setCountryClose();
	}
	const selectLanguage = () => {
		const languageMap = [
		  'urdu', 'hi', 'nep', 'bn', 'id', 'en', 'ko', 'ja', 'th', 'de', 'fr', 'es', 'hausa'
		];
		const language = languageMap[lagdata.index];
		if (language) {
		  switchLanguage(language);
		}
		setLanguageClose();
		if (!hasVisited.value) {
			showTipsOpen();
			rulesPopusShow.value = true;
		}
	}
	
	const swiperdata = reactive({
		swiperIndx: 0,
		list: [{ jump_link: '' }],
		listdata: []
	})
	
	const getCurrent = (data : any) => {
		let current = 0
		data.forEach((item : any) => {
			current = current + item.completed
		})
		return current
	}
	const swiperChange = (e : any) => {
		
		swiperdata.swiperIndx = e.current
	}

	const clickSwiper = (e : any) => {
		if (hasVisited.value) {
			
			const baseUrl = swiperdata.listdata[e]?.jump_link
			
			const queryParams = {
				prevPage: 'home',
			}

			
			const fullUrl = `${baseUrl}?${Object.entries(queryParams).filter(([_, value]) => value).map(([key, value]) => `${key}=${value}`).join('&')}`
			window.top?.postMessage(fullUrl, window.location.origin);
			uni.navigateTo({
				url: fullUrl
			})
		}
		if (!hasVisited.value) {
			showTipsOpen();
		}
	}
	
	const noticedata = reactive({
		list: ['new vioce', 'four news']
	})
	
	const pagedata = reactive({
		taskStageList: {
			getNewUser: { data: [], invite: 0 },
			groupMember: { data: [], invite: 0 },
			online: { data: [], invite: 0 },
			scanCode: { data: [], invite: 0 }
		},
		taskDetail: { ChanTask: { type: 1 }, Phase: [{}] },
		showTask: false,
		timer: {},
		targetTimestamp: 1733258800000, 
		countdown: {
			days: 0,
			hours: 0,
			minutes: 0,
			seconds: 0
		},
		totalPoints: 0,
		pagelist: new Map([
			['home', 'index/index'],
			['scan', 'scan/index'],
			['user', 'user/index'],
			['leaderBoard', 'user/leaderBoard/index'],
			['invite', 'index/invite/invite'],
			['withdraw', 'withdraw/index']
		]),
			langlistMap: new Map([
							['hi', 0],
							['en', 1],
							['zh', 2],
							['kan', 3],
							['mala', 4],
							['mar', 5],
							['tam', 6],
							['tel', 7],
						]),
				langlistMapTest: new Map([
					['₹', 1],
					['Rp', 2],
					['₦', 3],
					['৳', 4],
					['Rs', 5],
				]),
		taskList: { ChanTask: [{ ChanTask: { type: 1 }, Phase: [{ rewardUpper: 0 }] }] },
		taskInfo: { title: '', content: '', sort_value: 0 },
		taskInfos: [],
		aircraftUrl: '',
	})
	const animating = ref(null)

	const handleItemClick = (page) => {
		
		animating.value = page;
		
		const iconElement = document.querySelector(`.rimg.${page}`);  
		if (iconElement) {
			iconElement.addEventListener('animationend', () => {
				
				changMainPage(page);
				animating.value = null; 
			});
		}

		
		setTimeout(() => {
			if (animating.value === page) {
				changMainPage(page);
				animating.value = null;
			}
		}, 300); 
	};
	const isAnimating = ref(false);
	const navRankList = (index : any, page : any) => {
		if (isAnimating.value) return;
		isAnimating.value = true;
		
		const view = document.querySelector(`.aniview${index}`);
		view.classList.add('shrink');

		
		setTimeout(() => {
			view.classList.remove('shrink');
			view.classList.add('grow');
			setTimeout(() => {
				view.classList.remove('grow');
				isAnimating.value = false;
				changMainPage(page)
				
			}, 100); 
		}, 100); 
	}
const showTasks = (item : any) => {
		if (!hasVisited.value) {
			showTipsOpen();
			return
		}
		pagedata.taskDetail = item
		pagedata.taskInfo = pagedata.taskInfos.filter((items : any) => item.ChanTask.type == items.task_type_order)[0]
		
		if (pagedata.taskInfo) {
			pagedata.showTask = true
		} else {
			
			uni.showToast({
				title: t('empty'),
				icon: 'none'
			})
		}
	}
	const pageIndex = ref(0)
	const changPage = (e : any) => {
		console.log("e---", e)
		if (hasVisited.value) {
			console.log("/pages/", pagedata.pagelist)
			window.top?.postMessage(`/pages/${pagedata.pagelist.get(e)}`, window.location.origin);
			uni.navigateTo({
				url: '/pages/' + pagedata.pagelist.get(e),
			})
		}
		if (!hasVisited.value) {
			showTipsOpen();
		}
	}
	const changMainPage = (e : any) => {
		if (hasVisited.value) {
			if (pagedata.timer) {
				clearInterval(pagedata.timer);
			}
			console.log("/pages/", pagedata.pagelist.get(e))
			window.top?.postMessage(`/pages/${pagedata.pagelist.get(e)}`, window.location.origin);
			uni.navigateTo({
				url: '/pages/' + pagedata.pagelist.get(e),
			})
		}
		if (!hasVisited.value) {
			showTipsOpen();
		}
	}
	const decodeHtmlString = (str : string) => {
		
		str = str.replace(/^<p>|<\/p>$/g, '');

		
		const textarea = document.createElement('textarea');
		textarea.innerHTML = str;
		let decoded = textarea.value;

		
		decoded = decoded.replace(/\\"/g, '"');

		return decoded;
	};
	const boundRulesContent = ref();
const rateAllocation=ref(0);
	const initPage = async () => {
		pagedata.totalPoints = uni.getStorageSync('totalPoints') || 0

		const res = await banner()
		if (res.code == 0) {
			swiperdata.list = []
			swiperdata.listdata = res.data
			
			swiperdata.listdata.sort((a, b) => {
				return a.sort_value - b.sort_value;
			});
			swiperdata.listdata.map((item : any) => swiperdata.list.push(imgUrl.value + '/' + item.image))
			
			
			
		}
		const rateReq = await configList({
					type: 1,
					fixedKey: 2,
				})
				rateAllocation.value=rateReq.data.content;
				uni.setStorageSync('rateAllocation',rateAllocation.value);
				const req = await getWithdrawalChannel();
				allocationList.value = req.data;
				rateArray.value = allocationList.value.map(item => ({
				  country: item.country, 
				  content: item.content.split(':')[1] 
				}));
		
				const foundRate = rateArray.value.find(item => item.country === country.value);
				exchangeRate.value = foundRate ? foundRate.content : 1;
				uni.setStorageSync('exchangeRate',exchangeRate.value);
		if (!hasVisited.value) {
			const ress = await taskBaseList()
			if (ress.code == 0) {
				pagedata.taskList = ress.data
				let arr = [[], [], [], []]
				pagedata.taskList.ChanTask.forEach((item : any, index : any) => {
					const uuid = getUuid();
					item.Phase.forEach((phaseItem, index) => {
						const uuid = getUuid();
						item.Phase[index].uuid = uuid
					})
					arr[[4, 2, 3, 5].indexOf(item.ChanTask.type)] = {
						...item,
						uuid
					}
				})
				pagedata.taskList.ChanTask = arr
				pagedata.taskList.ChanTask = arr.filter(item => {
					return Array.isArray(item) ? item.length > 0 : item
				})
				console.log('pagedata.taskList********', pagedata.taskList);
			}
		} else {
			const ress = await taskList()
			if (ress.code == 0) {
				pagedata.taskList = ress.data
				let arr = [[], [], [], []]
				pagedata.taskList.ChanTask.forEach((item : any, index : any) => {
					const uuid = getUuid();
					item.Phase.forEach((phaseItem, index) => {
						const uuid = getUuid();
						item.Phase[index].uuid = uuid
					})
					arr[[4, 2, 3, 5].indexOf(item.ChanTask.type)] = {
						...item,
						uuid
					}
				})
				pagedata.taskList.ChanTask = arr
				pagedata.taskList.ChanTask = arr.filter(item => {
					return Array.isArray(item) ? item.length > 0 : item
				})
				console.log(pagedata.taskList.ChanTask, 'pagedata.taskList.ChanTask');
			}
			const rep = await homeAnnouncement({type:1})
			if (rep.code == 0) {
				pagedata.taskInfos = rep.data
			}

			
			const resStage = await taskStage()
			if (resStage.code == 0) {
				pagedata.taskStageList = resStage.data
			}
			getInstallInfo();
		}
		
		let showCount = uni.getStorageSync("showTips")
		console.log("showCount", showCount)
		if (showCount == 1) {
			rulesPopusShow.value = true;
			getBounsRluesContent();
			uni.removeStorageSync('showTips');
		}
	}
	initPage()

	
	const updateCountdown = () => {
		const now = Date.now();
		const diff = pagedata.targetTimestamp - now;

		if (diff <= 0) {
			clearInterval(pagedata.timer);
			pagedata.countdown.days = 0;
			pagedata.countdown.hours = 0;
			pagedata.countdown.minutes = 0;
			pagedata.countdown.seconds = 0;
			return;
		}

		pagedata.countdown.days = Math.floor(diff / (1000 * 60 * 60 * 24));
		pagedata.countdown.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		pagedata.countdown.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
		pagedata.countdown.seconds = Math.floor((diff % (1000 * 60)) / 1000);
	}

	
	const startCountdown = () => {
		updateCountdown(); 
		pagedata.timer = setInterval(updateCountdown, 1000);
	}

	const getAircraft = async () => {
			const reps = await platformConfig()
			if (reps.code == 0) {
				
				pagedata.aircraftUrl = "https://t.me/" + reps.data.customer_telegram
				uni.setStorageSync('aircraftUrl', pagedata.aircraftUrl)
			}
		}

	const getBounsRluesContent = async () => {
		const reps = await getHomeAnnouncement({
			type:3
		})
		if (reps.code == 0) {
			boundRulesContent.value = decodeHtmlString(reps.data.content);
			
		}
	}

	const installBookmarkInfo = ref({});

	const getInstallInfo = async () => {
		const res = await getInstallBookmarkInfo();
		
		if (res.code === 0) {
			installCertificateShow.value = !res.data.userId;
			installBookmarkInfo.value = res.data;
		}
	}

const ifn = async () => {
  const res = await settleInstallBookmarkInfo()
  if (res.code === 0) {
    uni.showToast({
      title: `${t('success')}!`,
      icon: 'none',
      duration: 2000,
    })
    installCertificateShow.value = false
  }
  
  if (res.code === 0) {
    installCertificateShow.value = !!res.data.userId
  }
}

	

	const installCertificate = async () => {
	  console.log('Install certificate clicked')
	  console.log('Deferred prompt:', userInfoStore.deferredPrompt)
	
	  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
	  
	  
	  
	  if (!hasVisited.value) {
	    return showTipsOpen()
	  }
	  
	  if (userInfoStore.deferredPrompt) {
	    userInfoStore.deferredPrompt.prompt()
	    userInfoStore.deferredPrompt.userChoice.then((choiceResult: any) => {
	      if (choiceResult.outcome === 'accepted') {
	        if (!isMobile) location.reload()
	        console.log('User accepted the installation')
	        
	      } else {
	        console.log('User dismissed the installation')
	      }
	      userInfoStore.setDeferredPrompt(null)
	    })
	  } else {
	    console.log('No installation prompt available')
	  }
	}

	const iKnowConfirm = () => {
	  rulesPopusShow.value = false
	}


	const handleChange = (e : any) => {
		isChecked.value = !isChecked.value
	}
	
	const dragPosition = reactive({
	  x: window.innerWidth - 48, 
	  y: window.innerHeight * 0.85, 
	});
	const isDragging = ref(false);
	const initialPosition = reactive({ x: 0, y: 0 });
	const dragStartPosition = reactive({ x: 0, y: 0 });
	
  
  const startDrag = (event) => {
    
    event.preventDefault();
    event.stopPropagation();
    
    
    initialPosition.x = dragPosition.x;
    initialPosition.y = dragPosition.y;
    
    
    dragStartPosition.x = event.touches ? event.touches[0].clientX : event.clientX;
    dragStartPosition.y = event.touches ? event.touches[0].clientY : event.clientY;
    
    
    isDragging.value = true;
    
    
    if (event.type === 'mousedown') {
      document.addEventListener('mousemove', handleDrag);
      document.addEventListener('mouseup', stopDrag);
    } else {
      document.addEventListener('touchmove', handleDrag, { passive: false });
      document.addEventListener('touchend', stopDrag);
    }
  };
  
  
  const handleDrag = (event) => {
    if (!isDragging.value) return;
    
    
    event.preventDefault();
    
    
    const clientX = event.touches ? event.touches[0].clientX : event.clientX;
    const clientY = event.touches ? event.touches[0].clientY : event.clientY;
    
    
    const deltaX = clientX - dragStartPosition.x;
    const deltaY = clientY - dragStartPosition.y;
    
    
    let newX = initialPosition.x + deltaX;
    let newY = initialPosition.y + deltaY;
    
    
    const iconSize = 32; 
    newX = Math.max(0, Math.min(window.innerWidth - iconSize, newX));
    newY = Math.max(0, Math.min(window.innerHeight - iconSize, newY));
    
    
    dragPosition.x = newX;
    dragPosition.y = newY;
  };
  
  
  const stopDrag = (event) => {
    
    const clientX = event.changedTouches ? event.changedTouches[0].clientX : event.clientX;
    const clientY = event.changedTouches ? event.changedTouches[0].clientY : event.clientY;
    
    const moveDistance = Math.sqrt(
      Math.pow(clientX - dragStartPosition.x, 2) + 
      Math.pow(clientY - dragStartPosition.y, 2)
    );
    
    
    if (moveDistance < 5) {
      window.open(pagedata.aircraftUrl, '_blank');
    }
    
    
    isDragging.value = false;
    
    
    document.removeEventListener('mousemove', handleDrag);
    document.removeEventListener('mouseup', stopDrag);
    document.removeEventListener('touchmove', handleDrag);
    document.removeEventListener('touchend', stopDrag);
  };
  
	onMounted(() => {
	const languageMap = [
	  'urdu', 'hi', 'nep', 'bn', 'id', 'en', 'ko', 'ja', 'th', 'de', 'fr', 'es', 'hausa'
	];
	
	
	const storedLang = uni.getStorageSync('langs');
	
	
	const languageIndex = languageMap.indexOf(storedLang);
	if (uni.getStorageSync('langs')) {
				const lang = uni.getStorageSync('langs') || 'en'; 
				symbol.value = uni.getStorageSync('symbol') || '$'; 
				country.value=uni.getStorageSync('country') || 0;
				countryData.index = pagedata.langlistMapTest.get(symbol.value) ?? 0; 
				lagdata.index = pagedata.langlistMap.get(lang) ?? 2; 
			}
	if (languageIndex !== -1) {
	  lagdata.index = languageIndex; 
	} else {
	  lagdata.index = 5; 
	}
		
		const token = uni.getStorageSync("token");
		if (route.currentRoute.value.href == "/pages/index/indexContent" && !token) {
			uni.removeStorageSync('hasVisited');
			hasVisited.value = null;
		}
		
		uni.setNavigationBarTitle({
			title: 'WhatsEngage!' + t('Earn money so easy') + '!' 
		});
		if (!hasVisited.value) {
			lagdata.showselect = true;
			getBounsRluesContent();
		} else {
			startCountdown();
			getAircraft();
		}

		nextTick(() => {
			const installButton = document.getElementById('installButton');
			if (installButton) {
				installButton.style.display = 'block';
				console.log('Install button found:', installButton);
				
				installButton.addEventListener('click', async () => {
					console.log('Install button clicked');
					installButton.style.display = 'none';
					await installCertificate(); 
				});
			} else {
				
			}

			
			window.addEventListener('beforeinstallprompt', (e) => {
				e.preventDefault();
				console.log('?? beforeinstallprompt fired');
				deferredPrompt = e;
				console.log('Deferred prompt stored:', deferredPrompt);
				installCertificateShow.value = true; 
			});
		})
		iframeTopValue.value = window.parent?.screenTop + 'px';
		iframeHeghtValue.value = (window.parent?.innerHeight - 50) + 'px';
	});
</script>

<template>
	<view class="content">
		<view class="tops">
			<view class="lefts" @click="openChooseLanguage">
				<!-- <div>
					<p>{{ t('language') }}</p>
					<button @click="switchLanguage('en')">English</button>
					<button @click="switchLanguage('hi')">हिंदी</button> 
				</div> -->
				<image src="../../static/index/lgs4.png" />
				<span>{{ t('language') }}</span>
				
			</view>
			<view class="lefts" @click="openChooseCountry">
				<!-- <div>
					<p>{{ t('language') }}</p>
					<button @click="switchLanguage('en')">English</button>
					<button @click="switchLanguage('hi')">हिंदी</button> 
				</div> -->
				<image src="../../static/index/lgs5.png" />
				
				
			</view>
			<view class="rights" @click="changPage('withdraw')">
				<view class="rt">
					
					
					<view>
					<text class="points">{{convertNumbers(pagedata.totalPoints,exchangeRate)}}</text>
					</view>
				</view>
				<span class="liti">{{ t('withdraw') }}</span>
			</view>
		</view>
		<view class="body">
			<view class="swipers">
				<up-swiper :radius="20" :height="210" :list="swiperdata.list" @change="swiperChange"
					:indicator="true" circular @click="clickSwiper" :autoplay="true">
					<template #indicator>
						<view style="display: flex;flex-flow: column;width: 94vw;">
							<view style="width: 94vw;">
								<view v-show="swiperdata.swiperIndx==0" class="custom-button"
									@click="navRankList(1, 'invite')">{{t('Click to start')}}</view>
							</view>
							<view
								style="display: flex;flex-flow: row;width: 94vw;justify-content: center;align-items: center;">
								<view v-for="(item,index) in swiperdata.list" :key="index"
									:class="swiperdata.swiperIndx==index?'indicatorsuper':'indicators'"></view>
							</view>
						</view>
					</template>
				</up-swiper>
			</view>
			
			<view  class="card4">
				<view class="ct">
					<image src="../../static/index/phone1.png" />
					<view class="ctr">
						<span style="font-size:0.8rem;font-weight: bold;">{{t('Bind What Account')}}</span>
						<span style="font-size:0.7rem;">
						{{symbol}}{{ convertNumbers(installBookmarkInfo?.amount* 0.01,exchangeRate)}}+
						</span>
					</view>
					<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;color: #fff;" @click="installCertificate" id="installButton">
						<span  class="liti">
							{{t('GET')}}
						</span>
					</view>
				</view>
				<!-- <view style="color:#ffa500 ;width: 100%;margin-top: 1rem;font-size: 0.8rem;">
					{{t('The lower-tier must complete one withdrawal to be considered a valid referral')}}.
				</view> -->
			</view>

			<view v-for="(item,index) in pagedata.taskList.ChanTask" :key="item.uuid" :class="'aniview'+index">
				
				<view class="card1" v-show=" item.ChanTask.type==5" :class="{'type-5': item.ChanTask.type == 5}">
					<view class="ct" @click="navRankList(index, 'invite')">
						<image src="../../static/index/rtop4.png" />
						<view class="ctr">
							<span
								style="font-size:0.8rem;font-weight: bold;color: #7e0fff;">{{t('Invite New User')}}</span>
							<span style="font-size:0.7rem;">{{pagedata.taskStageList.groupMember?.invite}}
								{{t('People')}}</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;color:#7e0fff;">
							<image class="itemsImg" src="../../static/index/zise.png"/>
							{{pluss(item.Phase)/100}}+
						</view>
					</view>
					<view class="cc" @click="navRankList(index, 'invite')">
						<up-steps :current="getCurrent(pagedata.taskStageList.groupMember?.data)"
							active-color="#7e0fff">
							<up-steps-item v-for="(items,indexs) in item.Phase" :key="items.uuid">
								<template #icon>
									<view
										:class="pagedata.taskStageList.groupMember.data[indexs]?.completed==1?'stepitemsc':'stepitems'">
										{{ convertNumbers(items.rewardUpper / 100,exchangeRate) }} {{ symbol }}
										<div class="neon-rays"></div>
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view class="cb">
						<view class="cnots"  @click="showTasks(item)">
							<view style="width: 60vw;"><up-notice-bar icon="volume-fill"
									:text="noticeList(item.Phase,item.ChanTask.type)" direction="column"
									bgColor="rgba(22, 28, 45, 0.85)" fontSize="0.8rem" color=" #9a3bff"
									style="border-radius:0.6rem;"></up-notice-bar></view>
						</view>
					</view>
				</view>
				
				<view class="card1" v-show="item.ChanTask.type==2" :class="{'type-2': item.ChanTask.type == 2}">
					<view class="ct" @click="navRankList(index, 'leaderBoard')">
						<image src="../../static/index/rtop5.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;color: rgb(251,233,69);">{{t('Standing Machine Task')}}</span>
							<span style="font-size:0.7rem;">{{Math.floor(pagedata.taskStageList.online?.invite/60)}}
								M</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;color:rgb(251,233,69)">
							<image class="itemsImg" src="../../static/index/ydlb2.png"/>
							{{pluss(item.Phase)/100}}+
						</view>
					</view>
					<view class="cc" @click="navRankList(index, 'leaderBoard')">
						<up-steps :current="getCurrent(pagedata.taskStageList.online?.data)" active-color="rgb(251,233,69)">
							<up-steps-item title="" desc="" v-for="(items,indexs) in item.Phase" :key="indexs">
								<template #icon>
									<view
										:class="pagedata.taskStageList.online.data[indexs]?.completed==1?'stepitemsc':'stepitems'">
										{{ convertNumbers(items.rewardUpper / 100,exchangeRate) }} {{ symbol }}
										
										<div class="neon-rays"></div>
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<view class="cb">
						<view class="cnots" @click="showTasks(item)">
							<view style="width: 60vw;"><up-notice-bar icon="volume-fill"
									:text="noticeList(item.Phase,item.ChanTask.type)" direction="column"
									bgColor="rgba(22, 28, 45, 0.85)" fontSize="0.8rem" color="rgb(251,233,69)"
									style="border-radius:0.6rem;"></up-notice-bar></view>
						<!-- 	<up-button type="primary" :plain="true" :text="t('Detail')" class="detailbtn"
								></up-button> -->
						</view>
					</view>
				</view>
				
				<view class="card1" v-show="item.ChanTask.type==3" :class="{'type-3': item.ChanTask.type == 3}">
					<view class="ct" @click="navRankList(index, 'scan')">
						<image src="../../static/index/rtop3.png" />
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;color: #ff00c8">{{t('Scan Code Tasks')}}</span>
							<span style="font-size:0.7rem;">{{pagedata.taskStageList.scanCode?.invite}}
								{{t('Account')}}</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;color: #ff00c8">
							<image class="itemsImg" src="../../static/index/pin.png"/>
							{{pluss(item.Phase)/100}}+
						</view>
					</view>
					<view class="cc" @click="navRankList(index, 'scan')">
						<up-steps :current="getCurrent(pagedata.taskStageList.scanCode?.data)" active-color=" #ff00c8">
							<up-steps-item title="" desc="" v-for="(items,indexs) in item.Phase" :key="indexs">
								<template #icon>
									<view
										:class="pagedata.taskStageList.scanCode.data[indexs]?.completed==1?'stepitemsc':'stepitems'">
										{{ convertNumbers(items.rewardUpper / 100,exchangeRate) }} {{ symbol }}
										
										<div class="neon-rays"></div>
									</view>
								</template>
							</up-steps-item>
						</up-steps>
					</view>
					<!-- <view class="cc" style="color: #F56C6C;">
					{{t('Activity Ended')}}！
				</view> -->
					<view class="cb">
						<view class="cnots" @click="showTasks(item)">
							<view style="width: 60vw;">
								<up-notice-bar icon="volume-fill" :text="noticeList(item.Phase,item.ChanTask.type)"
									direction="column" color="#ff00c8"
									style="border-radius:0.6rem;background: rgba(22, 28, 45, 0.85);" fontSize="0.8rem"></up-notice-bar>
							</view>
							<!-- <up-button type="primary" :plain="true" :text="t('Detail')" class="detailbtns"
								></up-button> -->
						</view>
					</view>
				</view>
				
				<view class="card4" v-show=" item.ChanTask.type==4" @click="navRankList(index, 'invite')">
					<view class="ct">
						<image src="../../static/index/rtop6.png" />
						  
						  <div class="corner-top-left"></div>
						 
						<view class="ctr">
							<span style="font-size:0.8rem;font-weight: bold;color: #fff;">{{t('Invite Task')}}</span>
							<span style="font-size:0.7rem;color: #fff;">{{pagedata.taskStageList.getNewUser?.invite}}
								{{t('Friends')}}</span>
						</view>
						<view style="font-weight: bold;font-size: 0.8rem;margin-left: auto;color: #fff;">
							{{plussTask(item.Phase)/100}}/{{t('Friends')}}
						</view>
						
						  <div class="corner-bottom-right"></div>
					</view>
					<!-- <view style="color:#ffa500 ;width: 100%;margin-top: 1rem;font-size: 0.8rem;">
						{{t('The lower-tier must complete one withdrawal to be considered a valid referral')}}.
					</view> -->
				</view>
			</view>
		</view>
		<view class="bottom">
			 <up-tabbar :value="pageIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<up-tabbar-item text="" @click="handleItemClick('home')" :active-text-color="'#f65251'">
					<template #active-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'home' }"
							src="../../static/nimg/home1.png"></image>
					</template>
					<template #inactive-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'home' }"
							src="../../static/nimg/home.png"></image>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="" @click="handleItemClick('scan')" :active-text-color="'#f65251'">
					<template #active-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'scan' }"
							src="../../static/nimg/scan1.png"></image>
					</template>
					<template #inactive-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'scan' }"
							src="../../static/nimg/scan.png"></image>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="" @click="handleItemClick('invite')" :active-text-color="'#f65251'">
					<template #active-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'invite' }"
							src="../../static/nimg/earn-icon1.png"></image>
					</template>
					<template #inactive-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'invite' }"
							src="../../static/nimg/earn-icon.png"></image>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="" @click="handleItemClick('user')" :active-text-color="'#f65251'">
					<template #active-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'user' }"
							src="../../static/nimg/mine-icon1.png"></image>
					</template>
					<template #inactive-icon>
						<image class="rimg" :class="{ 'rotate-animation': animating === 'user' }"
							src="../../static/nimg/mine-icon.png"></image>
					</template>
				</up-tabbar-item>
			</up-tabbar>
		</view>
		<up-popup :show="pagedata.showTask" :mode="pagedata.taskDetail.ChanTask.type!=5?'center':'bottom'"
			@close="pagedata.showTask=false" :closeable="true" :round="10">
			<view class="tasks" v-show="pagedata.taskDetail.ChanTask.type==5">
				<view class="bodys">
					<view class="title">{{t(pagedata.taskInfo.title)}}</view>
					<view class="cells">
						<rich-text :nodes="pagedata.taskInfo.content?pagedata.taskInfo.content:'-'"></rich-text>
					</view>
					<view class="prlist" @click="changPage('leaderBoard')">{{t('RANKING LIST')}}</view>
				</view>
			</view>
			<view class="taskc" v-show="pagedata.taskDetail.ChanTask.type!=5">
				<view class="bodys">
					<view class="title">{{t(pagedata.taskInfo.title)}}</view>
					<view class="cells">
						
						<rich-text :nodes="pagedata.taskInfo.content?pagedata.taskInfo.content:'-'"></rich-text>
					</view>
					<view class="btns">
						<view class="btn cancel" @click="pagedata.showTask=false">{{ t('cancel') }}</view>
						<view class="sure" @click="changPage('scan')">{{ t('Start') }}</view>
					</view>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="lagdata.showselect" :round="20" mode="bottom" @close="setLanguageClose" @open="setLanguageOpen">
			<view class="langus">
				<view style="width: 100%;text-align: center;font-size: 01rem;font-weight: bold;">
					{{ t('Select you language') }}
				</view>
				<view class="laglist">
					
					<view @click="lagdata.index = 5" :class="lagdata.index === 5 ? 'selects items' : 'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">English</span>
					</view>
					
					<view @click="lagdata.index = 0" :class="lagdata.index === 0 ? 'selects items' : 'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Pakistan</span>
					</view>
					
					<view @click="lagdata.index = 1" :class="lagdata.index === 1 ? 'selects items' : 'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Hindi</span>
					</view>
					
					<view @click="lagdata.index = 3" :class="lagdata.index === 3 ? 'selects items' : 'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Bengali</span>
					</view>
					
					<view @click="lagdata.index = 4" :class="lagdata.index === 4 ? 'selects items' : 'nones items'">
						<span style="font-size: 0.8rem;font-weight: bold;">Indonesian</span>
					</view>
					
						<view @click="lagdata.index=12" :class="lagdata.index==12?'selects items':'nones items'">
							<span style="font-size: 0.8rem;font-weight: bold;">Nigeria</span>
						</view>
				</view>
				<view class="btns">
					<view class="cancel" @click="setLanguageClose">{{ t('cancel') }}</view>
					<view class="sure" @click="selectLanguage">{{ t('confirm') }}</view>
				</view>
			</view>
		</up-popup>
		
	<up-popup :show="showTips" :round="20" mode="center" @close="" type="dialog" @open="">
	  <view class="tips">
	    <view class="inner-container">
	      <view class="title">
	        {{ t('Tips !') }}
	      </view>
	      <view class="tipsContent">
	        {{ t('Please log in and start making money!') }}
	      </view>
		  <view class="btn cancel" @click="showTipsClose">{{ t('Look first') }}</view>
		  <view class="btn sure" @click="goRegister">
		    {{ t('Log in now') }}
		    <span class="btn-shine"></span>
		  </view>
	    </view>
	  </view>
	</up-popup>
	<up-popup :show="countryData.showselect" :round="20" mode="center" @close="setCountryClose"
	    @open="setCountryOpen">
	    <view class="langus">
	        <view class="language-title">
	            Select Country
	        </view>
	
	        <view class="laglist">
	            
	            <view @click="countryData.index = 1"
	                :class="countryData.index === 1 ? 'selects items' : 'nones items'">
	                <view class="country-flag-container">
	                    <image class="country-flag" src="../../static/bank-icons/india.png" />
	                </view>
	                <view class="country-text">
	                    
	                    <span>हिन्दी</span>
	                </view>
	            </view>
	            
	            <view @click="countryData.index = 2"
	                :class="countryData.index === 2 ? 'selects items' : 'nones items'">
	                <view class="country-flag-container">
	                    <image class="country-flag" src="../../static/bank-icons/indonesia.png" />
	                </view>
	                <view class="country-text">
	                    
	                    <span>Bahasa Indonesia</span>
	                </view>
	            </view>
	            
	            <view @click="countryData.index = 3"
	                :class="countryData.index === 3 ? 'selects items' : 'nones items'">
	                <view class="country-flag-container">
	                    <image class="country-flag" src="../../static/bank-icons/nigeria.png" />
	                </view>
	                <view class="country-text">
	                    <span>Nigeria</span>
	                    
	                </view>
	            </view>
	
	            
	            <view @click="countryData.index = 4"
	                :class="countryData.index === 4 ? 'selects items' : 'nones items'">
	                <view class="country-flag-container">
	                    <image class="country-flag" src="../../static/bank-icons/bangladesh.png" />
	                </view>
	                <view class="country-text">
	                    
	                    <span>বাংলাদেশ</span>
	                </view>
	            </view>
	
	            
	            <view @click="countryData.index = 5"
	                :class="countryData.index === 5 ? 'selects items' : 'nones items'">
	                <view class="country-flag-container">
	                    <image class="country-flag" src="../../static/bank-icons/pakistan.png" />
	                </view>
	                <view class="country-text">
	                    
	                    <span>پاکستان</span>
	                </view>
	            </view>
	
	
	        </view>
	        <view class="btn_line">
	        </view>
	        <view class="btns">
	            <view class="cancel" @click="setCountryClose">{{ t('cancel') }}</view>
	            <view class="sure" @click="selectCountry">{{ t('confirm') }}</view>
	        </view>
	    </view>
	</up-popup>
		
		<up-popup :show="rulesPopusShow" :round="20" mode="center" @close="" type="dialog" @open="">
			<view class="bonusRules">
				<view class="title">
					{{ t('<Bonus rules>') }}
				</view>
				<div class="rules-content" v-html="boundRulesContent"></div>
				<!-- 	<view class="know">
					<checkbox :value="isChecked" :checked="isChecked" @click="handleChange" />
					I Know
				</view> -->
				<view class="confirm_btn sure" style="text-align: center;" @click="iKnowConfirm">
					Confirm
				</view>
			</view>
		</up-popup>
		
		
		<!-- <up-popup :show="installBookMarkShow" :round="20" mode="center" @close="" type="dialog" @open="">
			<view class="installBookMark">
				<view class="title"></view>
				<view class="bmc">
					<img src="@/static/index/520.png" style="width: 2rem;height: 2rem;"/>
					<view class="text_box" style="line-height: 0.9rem;">
						<view style="margin-bottom: 0.3rem;">WhatsEngage!</view>
						<view class="" style="font-size: 0.8rem;color: #aaa;">WhatsEngage.in</view>
					</view>
				</view>
				<view class="buttonW">
					<view class="cancel" @click="installBookMarkShow  = false"></view>
					<view class="install" id="installButton"></view>
				</view>
			</view>
		</up-popup> -->
		
		<!-- <uni-popup ref="alertDialog" type="dialog" :show="true">
			<uni-popup-dialog :type="'info'" cancelText="" confirmText="" title="" content=" uni-popup!" @confirm=""
				@close=""></uni-popup-dialog>
		</uni-popup> -->
		
		
				<div class="telegram-wrapper">
				  <div 
				    class="telegram-icon"
				    @mousedown="startDrag"
				    @touchstart="startDrag"
				    :style="{
				      top: dragPosition.y + 'px',
				      left: dragPosition.x + 'px',
				      zIndex: '99999',
				      position: 'fixed'
				    }"
				  >
				    <img style="width: 2rem; height: 2rem;" src="@/static/teltgram.png" />
				  </div>
				</div>
	</view>

</template>



<style lang="scss" scoped>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;400;500;600&display=swap');

  .content {
    background: #090b14;
    min-height: 100vh;
    font-family: 'Rajdhani', sans-serif;
    position: relative;
    overflow-x: hidden;
    color: #d8e0f0;
    
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        linear-gradient(to right, rgba(41, 121, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(41, 121, 255, 0.03) 1px, transparent 1px);
      background-size: 24px 24px;
      z-index: 0;
    }
    
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40vh;
      background: radial-gradient(ellipse at bottom, rgba(88, 65, 255, 0.15) 0%, transparent 70%);
      z-index: 0;
      pointer-events: none;
    }
    
    .body {
      position: relative;
      
      padding: 80px 16px 100px;
      
      .swipers {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 30px rgba(86, 0, 187, 0.15);
		width: 94vw;
		z-index: 999;
        
		
     

        .custom-button {
          background: linear-gradient(90deg, #ff2a6d, #d61e5c);
          border: none;
		  width: 20vw;
          color: white;
          font-family: 'Orbitron', sans-serif;
          font-size: 0.5rem;
          letter-spacing: 1px;
          padding: 8px 20px;
          border-radius: 4px;
          position: relative;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(255, 42, 109, 0.3);
          margin-left: auto;
          margin-right: 20px;
          
          &::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
            animation: buttonGlow 4s infinite linear;
          }
          
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
          }
        }
      }
      
      .card1 {
        background: rgba(22, 28, 45, 0.85);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        margin-top: 20px;
        padding: 0;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(78, 81, 144, 0.3);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3), 
                      0 0 10px rgba(78, 81, 144, 0.2);
        }
        
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 10%;
          right: 10%;
          height: 2px;
          background: linear-gradient(90deg, 
            rgba(78, 81, 144, 0), 
            rgba(78, 81, 144, 0.8),
            rgba(78, 81, 144, 0));
          z-index: 2;
        }
    &.type-2::before {
      background: linear-gradient(90deg, 
        rgba(255, 136, 0, 0), 
        rgb(251,233,69), 
        rgba(255, 136, 0, 0));
      box-shadow: 0 0 10px rgb(251,233,69);
    }    
      
      
      
      
      
      
      
      
      &.type-5::before {
        background: linear-gradient(90deg, 
          rgba(126, 15, 255, 0), 
          rgba(126, 15, 255, 0.8), 
          rgba(126, 15, 255, 0));
        box-shadow: 0 0 10px rgba(126, 15, 255, 0.5);
      }
        &.type-3::before {
          background: linear-gradient(90deg, 
            rgba(252, 138, 151, 0), 
            #ff00c8, 
            rgba(252, 138, 151, 0));
        }
        
        .ct {
          display: flex;
          align-items: center;
          padding: 20px;
          position: relative;
          z-index: 2;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20px;
            right: 20px;
            height: 1px;
            
          }
          
          image {
            width: 38px;
            height: 38px;
            filter: drop-shadow(0 0 8px rgba(130, 36, 227, 0.3));
          }
          
          .ctr {
            margin-left: 16px;
            
            span:first-child {
              font-family: 'Orbitron', sans-serif;
              font-size: 18px;
              font-weight: 600;
              color: #fff;
              display: block;
              letter-spacing: 0.5px;
              margin-bottom: 4px;
              text-shadow: 0 0 10px rgba(130, 36, 227, 0.5);
            }
            
            span:last-child {
              font-size: 14px;
              color: #8f9bbd;
              display: block;
            }
          }
          
          & > view:last-child {
            margin-left: auto;
            font-family: 'Orbitron', sans-serif;
            font-weight: 500;
            font-size: 16px;
            color: #00f0ff;
            
            padding: 8px 16px;
            border-radius: 6px;
            position: relative;
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
            
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              
              border-radius: 6px;
            }
          }
        }
        
        .cc {
          margin: 16px 0;
          padding: 0 20px;
          display: flex;
          justify-content: space-around;

			
          
           .stepitems {
             position: relative;
             width: 64px;
             height: 64px;
             display: flex;
             justify-content: center;
             align-items: center;
             font-weight: 600;
             color: red;
              padding-left: 7px;
             text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
             
             background-size: contain !important;
             background-position: center !important;
             background-repeat: no-repeat !important;
             z-index: 1;
           }
           
         
         .stepitemsc {
           position: relative;
           width: 35px;
           height: 35px;
           display: flex;
           justify-content: center;
           align-items: center;
           font-weight: 600;
           color: #ff00c8; 
          padding-left: 7px;
           text-shadow: 0 0 8px rgba(255, 0, 200, 0.7);
           z-index: 1;
           
           
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 50%; 
          background: linear-gradient(45deg, #00f0ff, #7e0fff);
          background-size: contain !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          z-index: -1;
          filter: drop-shadow(0 0 8px rgba(255, 0, 200, 0.5)) brightness(1.2);
          animation: neonPulse 2s infinite alternate;
        }
           
           
           &::after {
             content: "";
             position: absolute;
             inset: -5px;
             border-radius: 50%;
             background: radial-gradient(
               circle,
               rgba(255, 0, 200, 0.2) 0%,
               rgba(255, 0, 200, 0.1) 40%,
               rgba(255, 0, 200, 0) 70%
             );
             z-index: -2;
             opacity: 0.8;
             animation: neonRadialPulse 3s infinite alternate;
           }
           
           
           .neon-rays {
             position: absolute;
             inset: -10px;
             border-radius: 50%;
             background: conic-gradient(
               transparent 0deg,
               transparent 30deg,
               rgba(255, 0, 200, 0.1) 40deg,
               rgba(255, 0, 200, 0) 50deg,
               transparent 60deg,
               transparent 120deg,
               rgba(255, 0, 200, 0.1) 130deg,
               rgba(255, 0, 200, 0) 140deg,
               transparent 150deg,
               transparent 210deg,
               rgba(255, 0, 200, 0.1) 220deg,
               rgba(255, 0, 200, 0) 230deg,
               transparent 240deg,
               transparent 300deg,
               rgba(255, 0, 200, 0.1) 310deg,
               rgba(255, 0, 200, 0) 320deg,
               transparent 330deg
             );
             z-index: -3;
             opacity: 0.6;
             animation: rotateRays 10s linear infinite;
           }
         }
         
         
         @keyframes neonPulse {
           0% {
             filter: drop-shadow(0 0 8px rgba(255, 0, 200, 0.5)) brightness(1.2);
           }
           100% {
             filter: drop-shadow(0 0 12px rgba(255, 0, 200, 0.8)) brightness(1.3);
           }
         }
         
         
         @keyframes neonRadialPulse {
           0% {
             opacity: 0.6;
             transform: scale(1);
           }
           100% {
             opacity: 0.9;
             transform: scale(1.1);
           }
         }
         
         
         @keyframes rotateRays {
           0% {
             transform: rotate(0deg);
           }
           100% {
             transform: rotate(360deg);
           }
         }
          
          .stepitemsc {
            color: #ff2a6d;
            text-shadow: 0 0 8px rgba(255, 42, 109, 0.5);
            
            &::before {
              border-color: rgba(255, 42, 109, 0.3);
              
            }
            
            &::after {
              border-color: rgba(255, 42, 109, 0.1);
            }
          }
        }
      }
    }
    
    .tops {
      background: rgba(15, 20, 35, 0.8);
      backdrop-filter: blur(10px);
      position: fixed;
      top: 0;
      width: 100%;
      
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 999;
      border-bottom: 1px solid rgba(78, 81, 144, 0.2);
      
      .lefts {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(130, 36, 227, 0.1);
          border-color: rgba(130, 36, 227, 0.4);
        }
        
        image {
          width: 30px;
          height: 30px;
          margin-right: 8px;
          filter: drop-shadow(0 0 4px rgba(130, 36, 227, 0.5));
        }
        
        span {
          font-family: 'Orbitron', sans-serif;
          font-weight: 500;
          font-size: 14px;
          color: #c2c9db;
          letter-spacing: 0.5px;
        }
      }
      
      .rights {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        
        .rt {
          display: flex;
          align-items: center;
          
          view {
            font-family: 'Orbitron', sans-serif;
            font-weight: 600;
            font-size: 16px;
            color: #00f0ff;
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
          }
        }
        
        .liti {
          margin-top: 6px;
          font-family: 'Orbitron', sans-serif;
          font-size: 12px;
          font-weight: 500;
          padding: 4px 12px;
          background: linear-gradient(90deg, #ff2a6d, #d61e5c);
          color: white;
          border-radius: 4px;
          position: relative;
          letter-spacing: 0.5px;
          box-shadow: 0 4px 12px rgba(255, 42, 109, 0.3);
          
          &::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            pointer-events: none;
          }
        }
      }
    }
.card4 {
  margin-top: 0.8rem;
  position: relative;
  padding: 0;
  background: linear-gradient(135deg, #0c0c14, #151528);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  
  
  &::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(90deg, #00f0ff, #7e0fff, #ff00c8, #00f0ff);
    background-size: 400% 100%;
    border-radius: 12px;
    z-index: -1;
    filter: blur(2px);
    animation: borderGlow 8s linear infinite;
  }
  
  
  &::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 12px;
    background-image: 
      radial-gradient(circle at 100% 0%, rgba(126, 15, 255, 0.2) 0%, transparent 25%),
      radial-gradient(circle at 0% 100%, rgba(0, 240, 255, 0.2) 0%, transparent 25%);
    pointer-events: none;
  }
  
 .ct {
   background: transparent;
   padding: 20px;
   border-bottom: 1px solid rgba(126, 15, 255, 0.3);
   display: flex;
   align-items: center;
   gap: 15px;
   position: relative;
   margin-bottom: 0;
   
   .corner-top-right {
     content: "";
     position: absolute;
     width: 18px;
     height: 18px;
     top: 0;
     right: 0;
     background: linear-gradient(45deg, transparent 50%, #ff00c8 50%);
     filter: drop-shadow(0 0 5px rgba(255, 0, 200, 0.8));
   }
   
   
.corner-top-left {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  left: 0;
  background: linear-gradient(315deg, transparent 50%, #00f0ff 50%);
  filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.8));
  animation: neonPulseBlue 3s infinite alternate;
}


@keyframes neonPulseBlue {
  0% {
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.8));
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 1)) 
           drop-shadow(0 0 20px rgba(0, 240, 255, 0.8))
           drop-shadow(0 0 30px rgba(0, 240, 255, 0.5));
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.9))
           drop-shadow(0 0 16px rgba(0, 240, 255, 0.7));
    transform: scale(1.1);
    opacity: 0.9;
  }
}
   
   
   .corner-bottom-left {
     position: absolute;
	width: 15px;
	height: 15px;
     bottom: 0px;
     left: 0px;
     background: linear-gradient(225deg, transparent 50%, #00f0ff 50%);
     filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.8));
   }
   
   
.corner-bottom-right {
  position: absolute;
  width: 15px;
  height: 15px;
  bottom: 0px;
  right: 0px;
  background: linear-gradient(135deg, transparent 50%, #ff00c8 50%);
  filter: drop-shadow(0 0 5px rgba(255, 0, 200, 0.8));
  animation: neonPulseStrong 2.5s infinite alternate-reverse;
}


@keyframes neonPulseStrong {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 0, 200, 0.8));
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 0, 200, 1)) 
           drop-shadow(0 0 20px rgba(255, 0, 200, 0.8))
           drop-shadow(0 0 30px rgba(255, 0, 200, 0.5));
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 0, 200, 0.9))
           drop-shadow(0 0 16px rgba(255, 0, 200, 0.7));
    transform: scale(1.1);
    opacity: 0.9;
  }
}
   
   image {
     height: 2.2rem;
     width: 2.2rem;
     filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
   }
   
   .ctr {
     margin-left: 0;
     
     span:first-child {
       color: #FFFFFF;
       font-size: 18px;
       font-weight: 600;
       letter-spacing: 0.5px;
       display: block;
       text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
     }
     
     span:last-child {
       color: rgba(255, 255, 255, 0.7);
       font-size: 14px;
       margin-top: 3px;
     }
   }
 }
  
  .cb {
    padding: 20px;
    
    .cnots {
      background: rgba(10, 10, 20, 0.6);
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: 8px;
      padding: 15px;
      position: relative;
      overflow: hidden;
      width: auto;
      
      
      &::after {
        content: "";
        position: absolute;
        top: -180%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          to right,
          transparent 0%,
          rgba(0, 240, 255, 0.1) 40%,
          rgba(126, 15, 255, 0.1) 60%,
          transparent 100%
        );
        transform: rotate(30deg);
        animation: lightScan 5s linear infinite;
      }
      
      
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        border-top: 2px solid #00f0ff;
        border-left: 2px solid #00f0ff;
        opacity: 0.8;
      }
    }
  }
  
  @keyframes borderGlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 400% 0%; }
  }
  
  @keyframes lightScan {
    0% { transform: rotate(30deg) translateX(-100%); }
    100% { transform: rotate(30deg) translateX(100%); }
  }
}
    
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(78, 81, 144, 0.2);
  display: flex;
  justify-content: space-around;
  
  z-index: 100;
  
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #00f0ff, #7e0fff, #ff00c8, #00f0ff) !important;
    background-size: 300% 100%;
    animation: borderGlow 5s linear infinite;
    opacity: 0.5;
  }
  
  .rimg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    &:hover {
      transform: scale(1.1) translateY(-2px);
    }
    
    
    &:active {
      animation: iconClickEffect 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    
    &.clicked {
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(0, 240, 255, 0.8);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.8;
        z-index: -1;
        animation: clickRipple 0.8s cubic-bezier(0.11, 0.44, 0.12, 1) forwards;
      }
    }
  }
}


@keyframes iconClickEffect {
  0% { 
    transform: scale(1.1); 
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
  }
  40% { 
    transform: scale(0.85); 
    filter: drop-shadow(0 0 12px rgba(255, 0, 200, 0.8));
  }
  70% { 
    transform: scale(1.05); 
    filter: drop-shadow(0 0 8px rgba(126, 15, 255, 0.6));
  }
  100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.3));
  }
}


@keyframes clickRipple {
  0% {
    width: 5px;
    height: 5px;
    opacity: 0.8;
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}


@keyframes borderGlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}
    
    
    @keyframes buttonGlow {
      0% { transform: rotate(45deg) translateX(-100%); }
      100% { transform: rotate(45deg) translateX(100%); }
    }
    
    
    .telegram-icon {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 50%;
      overflow: hidden;
      
      
      img {
        border-radius: 50%;
        border: 1px solid rgba(0, 132, 255, 0.4);
      }
      
      &:active {
        transform: scale(1.1) !important;
      }
    }
    
    
    .laglist {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin: 16px 0;
      
      .items {
        background: rgba(15, 20, 35, 0.6);
        border: 1px solid rgba(78, 81, 144, 0.3);
        border-radius: 6px;
        padding: 10px;
        transition: all 0.3s ease;
        text-align: center;
        
        span {
          font-family: 'Rajdhani', sans-serif;
          font-weight: 500;
        }
      }
      
      .selects {
        background: rgba(130, 36, 227, 0.1);
        border-color: rgba(130, 36, 227, 0.4);
        box-shadow: 0 0 15px rgba(130, 36, 227, 0.2);
        
        span {
          color: #b778ff;
          font-weight: 600;
        }
      }
      
      .nones:hover {
        background: rgba(15, 20, 35, 0.8);
        transform: translateY(-2px);
      }
    }
    
  
  }
 .langus {
   
   padding: 6vw 4vw;
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   z-index: 1;
   position: relative;
   
   
   &::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(20, 20, 40, 0.8));
     
     z-index: -1;
     backdrop-filter: blur(10px);
   }
   
   
   &::after {
     content: "";
     position: absolute;
     inset: -1px;
     background: linear-gradient(90deg, #00f0ff, #7e0fff, #ff00c8, #00f0ff);
     background-size: 300% 100%;
     
     z-index: -2;
     filter: blur(2px);
     animation: borderGlow 8s linear infinite;
   }
 }
 
 .laglist {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   margin: 1rem 0;
 }
 
 .items {
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 0.4rem;
   
   border-radius: 0.6rem;
   font-size: 13px;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }
 
 .selects {
   background: rgba(255, 0, 200, 0.1);
   border: 1px solid #ff00c8;
   color: #ff00c8;
   box-shadow: 0 0 15px rgba(255, 0, 200, 0.3), inset 0 0 10px rgba(255, 0, 200, 0.1);
   text-shadow: 0 0 5px rgba(255, 0, 200, 0.8);
   cursor: pointer;
   
   
   &::after {
     content: "";
     position: absolute;
     top: -100%;
     left: -100%;
     width: 120%;
     height: 200%;
     background: linear-gradient(
       60deg,
       transparent,
       rgba(255, 0, 200, 0.2),
       transparent
     );
     transform: rotate(30deg);
     animation: lightSweep 3s infinite;
   }
 }
 
 .nones {
   background: rgba(0, 240, 255, 0.03);
   border: 1px solid rgba(0, 240, 255, 0.2);
   color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
   transition: all 0.3s ease;
   
   &:hover {
     background: rgba(0, 240, 255, 0.1);
     border-color: rgba(0, 240, 255, 0.3);
     color: #00f0ff;
     text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
   }
 }
 
 
 .btns {
   width: 100%;
   display: flex;
   flex-flow: row;
   align-items: center;
   font-size: 0.8rem;
   font-weight: bold;
   justify-content: space-around;
   margin-top: 1.5rem;
 }
 
 .cancel {
   cursor: pointer;
   border: 1px solid rgba(126, 15, 255, 0.4);
   background: rgba(126, 15, 255, 0.05);
   color: #fff;
   text-align: center;
   padding: 0.6rem;
   border-radius: 2rem;
   width: 30vw;
   transition: all 0.3s ease;
   text-shadow: 0 0 5px rgba(126, 15, 255, 0.5);
   
   &:hover {
     background: rgba(126, 15, 255, 0.1);
     box-shadow: 0 0 15px rgba(126, 15, 255, 0.3);
   }
 }
 
 .sure {
   cursor: pointer;
   text-align: center;
   background: linear-gradient(45deg, #00f0ff, #7e0fff);
   position: relative;
   color: #fff;
   padding: 0.6rem;
   border-radius: 2rem;
   width: 30vw;
   overflow: hidden;
   text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
   transition: all 0.3s ease;
   
   
   &::before {
     content: "";
     position: absolute;
     inset: -1px;
     background: linear-gradient(90deg, #00f0ff, #7e0fff, #ff00c8, #00f0ff);
     background-size: 300% 100%;
     border-radius: 2rem;
     z-index: -1;
     animation: borderGlow 4s linear infinite;
   }
   
   
   &::after {
     content: "";
     position: absolute;
     top: -100%;
     left: -100%;
     width: 120%;
     height: 300%;
     background: linear-gradient(
       60deg,
       transparent,
       rgba(255, 255, 255, 0.2),
       transparent
     );
     transform: rotate(30deg);
     animation: lightSweep 2s infinite;
   }
   
   &:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4);
   }
 }
 
 @keyframes borderGlow {
   0% { background-position: 0% 0%; }
   100% { background-position: 300% 0%; }
 }
 
 @keyframes lightSweep {
   0% { transform: rotate(30deg) translateX(-100%); }
   100% { transform: rotate(30deg) translateX(100%); }
 }
 
 .tips, .bonusRules {
   background: rgba(10, 12, 25, 0.9);
   border-radius: 12px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
   padding: 15px;
   
   
   
   &::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 12px;
     padding: 2px;
     background: linear-gradient(90deg, #00f0ff, #7e0fff, #ff00c8, #00f0ff);
     background-size: 400% 100%;
     -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
     
     mask-composite: exclude;
     animation: borderGlow 8s linear infinite;
     opacity: 0.8;
   }
   
   
   .inner-container {
     position: relative;
     z-index: 2;
     padding: 20px;
     background: rgba(20, 22, 35, 0.7);
     border-radius: 10px;
   }
   
   .title {
     font-family: 'Orbitron', sans-serif;
     font-weight: 600;
     font-size: 18px;
     color: #fff;
     text-shadow: 0 0 12px rgba(0, 240, 255, 0.7);
     margin-bottom: 16px;
     padding-bottom: 16px;
     position: relative;
     text-align: center;
     
     &::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 10%;
       right: 10%;
       height: 2px;
       background: linear-gradient(90deg, 
         rgba(0, 240, 255, 0), 
         rgba(0, 240, 255, 0.8),
         rgba(0, 240, 255, 0));
       box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
     }
   }
   
   .tipsContent, .rules-content {
     color: rgba(255, 255, 255, 0.8);
     font-size: 15px;
     line-height: 1.5;
     
     
     strong, b, em {
       color: #00f0ff;
       font-weight: 600;
       text-shadow: 0 0 5px rgba(0, 240, 255, 0.7);
     }
   }
   
   
   &::after {
     content: '';
     position: absolute;
     top: -150%;
     left: -50%;
     width: 200%;
     height: 300%;
     background: linear-gradient(
       60deg,
       transparent,
       rgba(0, 240, 255, 0.05),
       rgba(255, 0, 200, 0.05),
       transparent
     );
     transform: rotate(30deg);
     animation: lightSweep 7s infinite;
     pointer-events: none;
   }
 }
 
 
 .btn, .confirm_btn {
   font-family: 'Rajdhani', sans-serif;
   font-weight: 600;
   font-size: 15px;
   padding: 10px 28px;
   border-radius: 24px;
   transition: all 0.3s ease;
   position: relative;
   
   z-index: 1;
   margin: 10px;
   
   &.sure {
     background: transparent;
     color: white;
     
     
     &::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(45deg, #00f0ff, #7e0fff);
       z-index: -2;
       border-radius: 24px;
     }
     
     
     &::after {
       content: '';
       position: absolute;
       inset: -2px;
       background: linear-gradient(90deg, #00f0ff, #7e0fff, #ff00c8, #00f0ff);
       background-size: 300% 100%;
       border-radius: 26px;
       z-index: -3;
       filter: blur(2px);
       animation: borderGlow 4s linear infinite;
     }
     
     
     .btn-shine {
       position: absolute;
       top: -100%;
       left: -100%;
       width: 300%;
       height: 300%;
       background: linear-gradient(
         60deg,
         transparent,
         rgba(255, 255, 255, 0.3),
         transparent
       );
       transform: rotate(30deg);
       animation: btnLightSweep 3s infinite;
       z-index: -1;
     }
     
     &:hover {
       transform: translateY(-3px) scale(1.05);
       box-shadow: 0 8px 20px rgba(0, 240, 255, 0.3);
       text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
     }
   }
   
   &.cancel {
     background: rgba(20, 22, 35, 0.7);
     border: 1px solid rgba(126, 15, 255, 0.4);
     color: #7e0fff;
     text-shadow: 0 0 8px rgba(126, 15, 255, 0.5);
     
     &:hover {
       background: rgba(126, 15, 255, 0.1);
       color: #ff00c8;
       text-shadow: 0 0 10px rgba(255, 0, 200, 0.7);
       box-shadow: 0 0 15px rgba(126, 15, 255, 0.3);
     }
   }
 }
 
 @keyframes borderGlow {
   0% { background-position: 0% 0%; }
   100% { background-position: 300% 0%; }
 }
 
 @keyframes lightSweep {
   0% { transform: rotate(30deg) translateX(-100%); }
   100% { transform: rotate(30deg) translateX(100%); }
 }
 
 @keyframes btnLightSweep {
   0% { transform: rotate(30deg) translateX(-100%); }
   100% { transform: rotate(30deg) translateX(100%); }
 }
 ::v-deep .u-steps-item__wrapper--row {
     width: 42px !important;
     height: 42px !important;
 }
 
 ::v-deep .u-tabbar__content{
	 background: #090b14;
 }
 ::v-deep .u-border-top, .up-border-top{
	 border-top:#090b14 !important ;
 }
 .indicators {
 		width: 6px;
 		height: 6px;
 		margin: 0 0.2rem;
 		animation: expandWidths 500ms forwards;
 	}
 
 	.indicatorsuper {
 		width: 0.8rem;
 		height: 6px;
 		margin: 0 0.4rem;
 		animation: expandWidth 500ms forwards;
 	}
	@keyframes expandWidth {
		0% {
			border-radius: 6px;
			background: rgba(255, 255, 255, 0.6);
			transform: scaleX(1);
		}
	
		100% {
			border-radius: 2px;
			transform: scaleX(1.6);
			background: rgba(255, 255, 255, 0.9);
		}
	}
	
	@keyframes expandWidths {
		0% {
			border-radius: 2px;
			transform: scaleX(1.6);
			background: rgba(255, 255, 255, 0.9);
		}
	
		100% {
			transform: scaleX(1);
			background: rgba(255, 255, 255, 0.6);
			border-radius: 6px;
		}
	}

.tasks, .taskc {
  
  .bodys {
    background: rgba(8, 8, 20, 0.85);
    
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    max-height: 75vh; 
    
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 16px;
      padding: 2px;
      background: linear-gradient(90deg, #00f0ff, #ff0099, #0f6, #f0f, #00f0ff);
      background-size: 300% 100%;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: borderGlow 8s linear infinite;
      pointer-events: none; 
    }
    
    
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 80%, rgba(0, 240, 255, 0.3), transparent 50%);
      opacity: 0.5;
      z-index: 0;
      filter: blur(20px);
      pointer-events: none; 
    }
    
    .title {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.5rem; 
      font-weight: 700;
      margin-bottom: 1.2rem;
      text-align: center;
      background: linear-gradient(90deg, #00f0ff, #ff0099);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 5px rgba(0, 240, 255, 0.5), 0 0 10px rgba(0, 240, 255, 0.3);
      position: relative;
      z-index: 1;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    
    .cells {
      background: rgba(20, 20, 35, 0.6);
      border-radius: 12px;
      padding: 1.2rem;
      margin-bottom: 1.2rem;
      position: relative;
      color: rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(0, 240, 255, 0.1);
      border: 1px solid rgba(0, 240, 255, 0.2);
      z-index: 1;
      overflow-y: auto; 
      max-height: 40vh; 
    }
  }
}


.tasks {
  .bodys {
    max-width: 94vw;
    margin: 0 auto;
    
    .prlist {
      background: linear-gradient(90deg, #00f0ff, #ff0099);
      color: white;
      border-radius: 50px;
      padding: 0.8rem 2rem;
      font-weight: 600;
      text-align: center;
      display: block;
      width: 80%;
      margin: 1rem auto 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
      cursor: pointer;
      transition: all 0.3s;
      z-index: 1;
    }
  }
}


.taskc {
  .bodys {
    min-width: 300px;
    max-width: 90vw;
    
    .btns {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      z-index: 2; 
      position: relative;
      
      .btn, .sure {
        flex: 1;
        text-align: center;
        border-radius: 50px;
        padding: 0.8rem 0;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
      }
      
      .cancel {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
      
      .sure {
        background: linear-gradient(90deg, #00f0ff, #ff0099);
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
      }
    }
  }
}


@keyframes borderGlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}


:deep(.up-popup) {
  
  .up-popup__content {
    background: transparent !important;
    max-height: 85vh; 
  }
  
  
  .up-popup__close-icon {
    color: #00f0ff !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
    font-size: 1.8rem;
    z-index: 999 !important; 
    cursor: pointer !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.3) !important; 
    border-radius: 50% !important;
    opacity: 0.9 !important;
    pointer-events: auto !important; 
    
    
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
    transform: scale(1.1) !important; 
  }
  
  
  .up-popup__close:hover {
    opacity: 1 !important;
    transform: scale(1.2) !important;
  }
}
.liti {
          margin-top: 6px;
          font-family: 'Orbitron', sans-serif;
          font-size: 12px;
          font-weight: 500;
          padding: 4px 12px;
          background: linear-gradient(90deg, #ff2a6d, #d61e5c);
          color: white;
          border-radius: 4px;
          position: relative;
          letter-spacing: 0.5px;
          box-shadow: 0 4px 12px rgba(255, 42, 109, 0.3);
          
          &::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            pointer-events: none;
          }
        }
</style>